<template>
  <!--2 st商品分类 -->
  <div class="breadcrumb">
    <Breadcrumb :aaa="aaa" :msgg="msg" :txt="txt" :path1="path1" />
  </div>
  <div class="con_container">
    <el-card>
      <div style="display: flex; justify-content: space-between">
        <div>
          <el-icon>
            <Tickets />
          </el-icon>
          <span style="line-height: 32px; margin-left: 10px">数据列表</span>
        </div>
        <el-button @click="addproduct">添加</el-button>
      </div>
    </el-card>

    <!-- 数据展示 -->
    <el-table :data="tableData.list" style="width: 100%" :border="true">
      <el-table-column prop="id" label="编号"></el-table-column>
      <el-table-column prop="name" label="分类名称"></el-table-column>
      <el-table-column label="级别">
        <template #default="scope">
          {{ scope.row.level === 0 ? "一级" : "二级" }}
        </template>
      </el-table-column>
      <el-table-column prop="productCount" label="商品数量"></el-table-column>
      <el-table-column prop="keywords" label="数量单位"></el-table-column>
      <el-table-column label="导航栏">
        <template #default="scope">
          <el-switch :value="scope.row.navStatus === 1 ? true : false" />
        </template>
      </el-table-column>
      <el-table-column label="是否显示">
        <template #default="scope">
          <el-switch :value="scope.row.showStatus === 1 ? true : false" />
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序"></el-table-column>
      <el-table-column label="设置" width="250">
        <template #default="scope">
          <el-button>查看下级</el-button>
          <el-button>转移商品</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button @click="editData(scope.row.id)">编辑</el-button>
          <el-button type="danger" @click="deleteproduct(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination class="pagination" v-model:current-page="tableData.pageNum" v-model:page-size="tableData.pageSize"
      background :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    <el-dialog v-model="centerDialogVisible" title="提示" width="30%" align-center>
      <span>是否要删除该品牌</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="delData"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import type { Ref } from "vue";
import * as api from "../../request/api";
import type {
  productCatelist,
  productCateRes,
} from "../../request/PmsProductCategoryController/index";
import { Search, Tickets } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import Breadcrumb from "../../components/breadcrumb.vue";
let msg = ref("商品分类");
let txt = ref("商品");
let path1 = ref("pms/addProduct");
let aaa = ref(0);

let centerDialogVisible = ref(false);
let router = useRouter();
// console.log(route);

let tableData = reactive({
  list: <any>[],
  pageNum: 1,
  pageSize: 5,
  total: 3,
  totalPage: 1,
});

let onalllist = async (a: number) => {
  let alllist = await api.productCate.adminproductCate({
    pageNum: tableData.pageNum,
    pageSize: tableData.pageSize,
    parentId: a,
  });
  tableData.list = alllist.list;
  tableData.pageNum = alllist.pageNum;
  tableData.pageSize = alllist.pageSize;
  tableData.total = alllist.total;
  tableData.totalPage = alllist.totalPage;
  // console.log(alllist);
};
onalllist(0);
console.log(tableData.list[1]);
// 每页条数发生变化时的处理
let handleSizeChange = (val: number) => {
  // console.log(val);
  tableData.pageSize = val;
  onalllist(0);
};
// 改变当前页数
let handleCurrentChange = (val: number) => {
  // console.log(val);
  tableData.pageNum = val;
  onalllist(0);
};
//添加
let addproduct = () => {
  router.push({ path: "/pms/addProductCate" });
};
// 编辑
let editData = (myid: number) => {
  router.push({ path: "/pms/updateProductCate", query: { id: myid } });
};
//删除
let myid = ref(0);
let deleteproduct = (val: number) => {
  centerDialogVisible.value = true;
  myid.value = val;
};
let delData = () => {
  console.log("删除成功");
  console.log(myid.value);
  // api.productCate.deleteproductCate({ id: val });
  centerDialogVisible.value = false;
};
</script>

<style lang="scss" scoped>
.el-card {
  margin: 20px 0px;
}

.breadcrumb {
  height: 45px;
  border-bottom: 1px solid #ebeef5;
  font-size: 20px;
}

.el-pagination {
  position: absolute;
  right: 40px;
}

.pagination {
  margin-top: 20px;
}

.con_container {
  padding: 0 20px !important;
  margin-top: 10px !important;
}

:deep .el-table .el-table__cell {
  text-align: center !important;
}

:deep .el-table thead {
  font-weight: bold !important;
}
</style>
